<template>
	<el-dialog title="支付凭证" v-model="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
		:close-on-press-escape="false" width="600px">
        所选订单总金额：￥{{ order_price_sum }} 退款总金额：￥{{ refund_money_sum }} 实际支付金额：￥{{ pay_money_sum }}

        <el-table :data="order_no_s" style="width: 30%">
            <el-table-column prop="order_no" label="订单号" />
            <el-table-column prop="price" label="订单金额"/>
			<el-table-column prop="super_user_refund_money" label="退款金额"/>
        </el-table>
        
		<el-form size="small" :model="form" :rules="formRules" ref="form">
			<el-form-item label="支付凭证" prop="image_id" >
				<el-row>
					<el-button type="primary" @click="openUpload">选择图片</el-button>
					<div v-if="form.image_id != ''" class="img">
						<img :src="file_path" width="100" height="100" />
					</div>
				</el-row>
			</el-form-item>

		</el-form>
		<template #footer>
			<el-button @click="dialogFormVisible">取 消</el-button>
			<el-button type="primary" @click="up_pay_prove" :loading="loading">确 定</el-button>
		</template>
		<!--上传图片组件-->
		<Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
	</el-dialog>
</template>

<script>
	import {
		addPayProve
	} from '@/api/order.js';
import Upload from '@/components/file/Upload.vue';
export default {
	components: {
		Upload,
	},
	data() {
		return {
			form: {
				image_id: '',
			},
			formRules: {
				image_id: [{
					required: true,
					message: '请上传分类图片',
					trigger: 'blur',
				}, ],
			},
			/*左边长度*/
			formLabelWidth: '120px',
			/*是否显示*/
			dialogVisible: false,
			loading: false,
			/*是否上传图片*/
			isupload: false,
		};
	},
	props: ['open_pay_prove', 'addform', 'order_no_s', 'order_price_sum', 'refund_money_sum', 'pay_money_sum'],
	created() {
		this.dialogVisible = this.open_pay_prove;
	},
	methods: {
		/*添加支付凭证*/
		up_pay_prove() {
			let self = this;
            var order_s = [];
            self.order_no_s.forEach(function(item) { 
				order_s.push(item.order_no);
			});
            var data_s = {
                order_no: order_s,
                pay_prove: self.form.image_id,
            }
            // console.log(data_s);return;
			self.$refs.form.validate((valid) => {
				if (valid) {
                    // console.log(222);
					self.loading = true;
					addPayProve(data_s).then((data) => {
						self.loading = false;
						ElMessage({
							message: '添加成功',
							type: 'success',
						});
						self.dialogFormVisible(true);
					}).catch((error) => {
						self.loading = false;
					});
				}
			});
		},

		/*关闭弹窗*/
		dialogFormVisible(e) {
			if (e) {
				this.$emit('closeDialog', {
					type: 'success',
					openDialog: false,
				});
			} else {
				this.$emit('closeDialog', {
					type: 'error',
					openDialog: false,
				});
			}
		},
		/*上传*/
		openUpload(e) {
			this.type = e;
			this.isupload = true;
		},
		/*获取图片*/
		returnImgsFunc(e) {
			if (e != null && e.length > 0) {
				this.file_path = e[0].file_path;
				this.form.image_id = e[0].file_id;
			}
			this.isupload = false;
		},
	},
};
</script>

<style scoped>
	.img {
		margin-top: 10px;
	}
</style>